import React from 'react';
import { Table, Card, Input, Button, Space } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import type { TableProps } from 'antd/lib/table';

const { Search } = Input;

export interface CustomTableProps<RecordType> extends Omit<TableProps<RecordType>, 'title'> {
  title?: string;
  showSearch?: boolean;
  searchPlaceholder?: string;
  onSearch?: (value: string) => void;
  showRefresh?: boolean;
  onRefresh?: () => void;
  extraActions?: React.ReactNode;
}

/**
 * 自定义表格组件
 * @param props 组件属性
 * @returns 自定义表格组件
 */
export function CustomTable<RecordType extends object = any>({
  title,
  showSearch = false,
  searchPlaceholder = '请输入搜索内容',
  onSearch,
  showRefresh = false,
  onRefresh,
  extraActions,
  ...tableProps
}: CustomTableProps<RecordType>) {
  return (
    <Card
      title={title}
      extra={
        <Space>
          {showSearch && (
            <Search
              placeholder={searchPlaceholder}
              onSearch={onSearch}
              style={{ width: 240 }}
              allowClear
            />
          )}
          {extraActions}
          {showRefresh && (
            <Button
              icon={<ReloadOutlined />}
              onClick={onRefresh}
              type="primary"
              ghost
            >
              刷新
            </Button>
          )}
        </Space>
      }
      bordered={false}
    >
      <Table<RecordType> {...tableProps} />
    </Card>
  );
}

export default CustomTable; 